<template>
    <div class="w-full h-full bg-fuchsia-50">
        <div  class="w-2/3 bg-white rounded-lg m-auto h-full q-gutter-md">
            <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="name" label="标题">
            </q-input>
            <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="ingredient" label="配料">
            </q-input>
            <q-uploader style="max-width: 300px" url="http://localhost:6677/blogs/upload_img" field-name="file" label="照片"
                accept=".jpg, image/*" @rejected="onRejected" @uploaded="onFinished" :auto-upload="true" />
            <q-input rounded outlined class="w-2/3 h-12" color="red-10" type="number" v-model="rating" label="评分">
            </q-input>
            <q-editor v-model="bio" min-height="5rem" placeholder="介绍" />
            <!-- <q-input  rounded outlined class="w-2/3 h-12" color="red-10" v-model="bio" label="介绍"> -->
            <!-- </q-input> -->
            <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="location" label="地点">
            </q-input>
            <q-select outlined v-model="category" :options="['中餐', '西餐', '甜点']" label="分类" />
            <div class="flex gap-10">
                <q-btn @click="submit" color="red-10" label="提交" />
                <q-btn class=" text-black" label="取消" />
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { api } from 'src/boot/axios';
import { useQuasar } from 'quasar';
const $q = useQuasar()
const name = ref('')
const ingredient = ref('')
const rating = ref('')
const bio = ref('')
const location = ref('')
const category = ref('')
const pics = ref('')

const onFinished = (info) => {
    console.log(info)
    let response = JSON.parse(info.xhr.response)
    pics.value = response.data
}

const submit = () => {
    // console.log(name.value, ingredient.value, rating.value, bio.value, location.value, category.value, pics.value)
    let payload = {
        name: name.value,
        ingredient: ingredient.value,
        rating: rating.value,
        bio: bio.value,
        location: location.value,
        category: category.value,
        user_id: localStorage.getItem('user_id'),
        username: localStorage.getItem('username'),
        pics: pics.value
    }
    api.post('/blogs/add_one', payload).then(res => {
        if (res.data.code === 200) {
            $q.notify({
                color: 'positive',
                position: 'top',
                message: '提交成功',
                icon: 'check'
            })
        } else {
            $q.notify({
                color: 'negative',
                position: 'top',
                message: '提交失败',
                icon: 'close'
            })
        }

    })
}
const reset = () => {
    name.value = ''
    ingredient.value = ''
    rating.value = ''
    bio.value = ''
    location.value = ''
    category.value = ''
    pics.value = ''
}





</script> 
 
<style scoped></style>